<template>
  <div>
    <el-button @click="changeThemeColor" type="primary">
      改变主题颜色</el-button
    >

    <el-scrollbar height="400px">
      <p v-for="item in 20" :key="item" class="scrollbar-demo-item">
        {{ item }}
      </p>
    </el-scrollbar>
    <el-table mb-1 :data="[]" />
    <el-pagination :total="100" />
  </div>
</template>

<script  setup>
import { computed, ref } from "vue";

const changeThemeColor = () => {
  // document.documentElement 是全局变量时
  const el = document.documentElement;
  // const el = document.getElementById('xxx')

  // 获取 css 变量
  getComputedStyle(el).getPropertyValue(`--el-color-primary`);

  // 设置 css 变量
  el.style.setProperty("--el-color-primary", "red");
};
</script>

<style  scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>